import React from "react";
import {
  HashRouter,
  Route,
  Switch,
  Link,
  BrowserRouter,
} from "react-router-dom";
import {
  Row,
  Col,
  Button,
  Breadcrumb,
  Dropdown,
  Menu,
  Pagination,
  Steps,
  PageHeader,
  BackTop,
  Progress,
  Tooltip,
  Timeline,
  Tag,
  Tabs,
  Badge,
  Input,
  Select,
  Carousel,
  Collapse,
  Descriptions,
  Rate,
  notification,
  TimePicker,
  DatePicker,
  Popconfirm,
  message,
  Drawer,
  Popover,
} from "antd";
import {
  UserOutlined,
  DownOutlined,
  BookOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import classic from "./book/classic";
import Success from "./book/success";
import Emery from "./book/emeryic";
import More from "./book/more";
import Culture from "./book/culture";
import a from "../img/img/1.jpg";
import b from "../img/img/2.jpg";
import c from "../img/img/4.jpg";
import d from "../img/img/7.jpg";
import e from "../img/img/8.jpg";
import f from "../img/img/9.jpg";
import ch from "../img/img/ch.jpg";
import { connect, Provider } from "react-redux";
import { store } from "../store/redux";
const Option = Select.Option;
const { Panel } = Collapse;
const { TabPane } = Tabs;
function cancel(e) {
  console.log(e);
  message.error("Click on No");
}
class Shou extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: true,
    };
    this.deng = this.Deng.bind(this);
  }
  componentDidMount() {
    console.log(this, "shou");
    message.info("hello");
  }
  click() {
    notification.open({
      message: "Notification Title",
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      onClick: () => {
        console.log("Notification Clicked!");
      },
    });
  }
  Deng() {
    console.log(123);
    this.props.history.push({ pathname: "/deng" });
  }
  Zhu() {
    console.log(123);
    this.props.history.push({ pathname: "/zhu" });
  }
  render() {
    return (
      <div>
        <header>
          <Row>
            <Col span={6}>
              <h3>
                {" "}
                <BookOutlined /> 安静书院11
              </h3>
            </Col>
            <Col span={12}>
              <Row>
                <Col span={12}>
                  <Tag>首页</Tag>
                  <Tag>分类</Tag>
                  <Tag>排行</Tag>
                  <Badge count={100}>
                    <Tag>征文大赛</Tag>
                  </Badge>
                </Col>
                <Col span={12}>
                  <Row>
                    <Col span={16}>
                      <Input
                        size="small"
                        addonBefore={
                          <Select defaultValue="lucy">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                              Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                          </Select>
                        }
                        addonAfter={<SearchOutlined />}
                      ></Input>
                    </Col>
                    <Col span={8}>
                      <span onClick={this.deng}>登陆</span>
                      <span onClick={this.Zhu.bind(this)}>注册</span>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
          </Row>
        </header>
        <Row>
          <Col span={24}>
            <Carousel autoplay effect="fade">
              <div>
                <Row>
                  <Col span={6}>
                    <img src={a} />
                  </Col>
                  <Col span={6}>
                    <img src={b} />
                  </Col>
                  <Col span={6}>
                    <img src={c} />
                  </Col>
                  <Col span={6}>
                    <img src={d} />
                  </Col>
                </Row>
              </div>
              <div>
                <Row>
                  <Col span={6}>
                    <img src={e} />
                  </Col>
                  <Col span={6}>
                    <img src={b} />
                  </Col>
                  <Col span={6}>
                    <img src={f} />
                  </Col>
                  <Col span={6}>
                    <img src={d} />
                  </Col>
                </Row>
              </div>
            </Carousel>
          </Col>
        </Row>
        <h2 style={{ textAlign: "center" }}>出版图书</h2>
        <Row>
          <Col span={8}>
            <Row>
              <Col span={24}>
                <p>
                  <Tag color="red">重点推荐</Tag>
                </p>
                <p>
                  <BookOutlined />
                  <strong>橙红年代：屌丝逆袭现代都市</strong>
                </p>
                <p>
                  <UserOutlined />
                  作者：骁骑校
                </p>
                <p>一个小贩历经八年血与火考验沾满硝烟气息回到花花都市</p>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <img src={ch} />
                <Rate
                  character="a"
                  allowHalf
                  defaultValue={1.5}
                  onChange={(x) => {
                    console.log(x);
                  }}
                />
                <Button onClick={this.click.bind(this)}>推荐新书</Button>
                <TimePicker
                  onClick={(x) => {
                    console.log(x);
                  }}
                ></TimePicker>
                <DatePicker
                  onChange={(data, str) => {
                    console.log(data + "," + str);
                  }}
                ></DatePicker>
                <Drawer
                  title="hell"
                  placement="right"
                  closable={true}
                  onClose={() => {
                    message.info("嗯嗯");
                    this.setState({ vis: false });
                  }}
                  visible={this.state.vis}
                >
                  asasa
                </Drawer>
                <Popconfirm
                  title="Are you sure delete this task?"
                  onConfirm={() => {
                    message.error("error");
                  }}
                  onCancel={cancel}
                  okText="Yes"
                  cancelText="No"
                >
                  <a href="#">Delete</a>
                </Popconfirm>
              </Col>
            </Row>
          </Col>
          <Col span={8}>
            <BrowserRouter>
              <Row>
                <Col span={24}>
                  <Breadcrumb>
                    <Breadcrumb.Item>
                      <Link to="/">小说</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <Link to="/success">励志成功学</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <Link to="/culture">文学</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <Link to="/emery">经济管理</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <Link to="/more">更多</Link>
                    </Breadcrumb.Item>
                  </Breadcrumb>
                </Col>
                <Col span={24}>
                  <Provider store={store}>
                    <Switch>
                      <Route exact path="/" component={classic}></Route>
                      <Route path="/success" component={Success} />
                      <Route path="/culture" component={Culture} />
                      <Route path="/emery" component={Emery} />
                      <Route path="/more" component={More} />
                    </Switch>
                  </Provider>
                </Col>
              </Row>
            </BrowserRouter>
          </Col>
          <Col span={8}>
            <Row>
              <Col span={24}>
                <Collapse defaultActiveKey={["1", "2", "3"]}>
                  <Panel key="1">
                    <p>hello world</p>
                  </Panel>
                  <Panel key="2">
                    <p>hello app</p>
                  </Panel>
                  <Panel key="3">
                    <p>hello yes</p>
                  </Panel>
                </Collapse>
              </Col>
            </Row>
          </Col>
        </Row>

        <footer>
          <Row>
            <Col span={24}>
              <Descriptions title="作者">
                <Descriptions.Item label="UserName">刘勇</Descriptions.Item>
                <Descriptions.Item label="Telephone">
                  1810000000
                </Descriptions.Item>
                <Descriptions.Item label="Live">
                  Hangzhou, Zhejiang
                </Descriptions.Item>
                <Descriptions.Item label="Remark">empty</Descriptions.Item>
                <Descriptions.Item label="Address">
                  No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                </Descriptions.Item>
              </Descriptions>
            </Col>
          </Row>
        </footer>
        <BackTop>
          <Popover content={<div>qwe</div>} title="hello">
            <Button color="primary">点击</Button>
          </Popover>
        </BackTop>
      </div>
    );
  }
}
const dis = (dispatch) => {
  return {
    onTodoClick: () => {
      dispatch(addToCart(1, 2, 3));
    },
    onOpen: (a) => {
      dispatch(open(a));
    },
  };
};
const ste = (state) => {
  return {
    product: state.product,
  };
};
export default connect(ste, dis)(Shou);
